<template>
  <div class="priceBox">
    <div class="lineBox" v-if="showLine">
      <div class="flex_b">
        <el-select v-model="selectValue" placeholder="请选择原料" @change="changeSelect">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <a href="JavaScript:;" @click="loadTab1">牌价影响</a>
      </div>
      <ve-line height="100%" width="100%" :data="chartData" :legend="legend" :grid='grid'
        :title="title" :xAxis="xAxis" :yAxis="yAxis" :settings="chartSettings">
      </ve-line>
    </div>
    <div class="tabBox" v-else>
      <div class="flex_b">
        <div>
          <span>时间：</span>
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <a href="JavaScript:;" @click="showLine = true">返回</a>
      </div>
      <div class="tabOutside flex_b">
        <v-tab :tabData="tabData1" :tabDeploy="tabDeploy1" :tabStyle="tabStyle1" @selected="loadTab2"></v-tab>
        <v-tab v-if="tabData2 != ''" :tabData="tabData2" :tabDeploy="tabDeploy2" :tabStyle="tabStyle2"></v-tab>
      </div>
    </div>
  </div>
</template>

<script>
  import Tab from "../public/Tab.vue"
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie } from '../../cookieUtil/cookieUtil';

  export default {
    name: 'Price',
    components: {
      'v-tab': Tab,
    },

    data () {
      this.chartSettings = {
        labelMap: {
          'value': '价格',
        },
        smooth: true,
        showSymbol:false,
        lineStyle: {
          color: {
            type: 'linear', x: 0, y: 0, x2: 1, y2: 1,
            colorStops: [{ offset: 0, color: '#4da2cd'}, { offset: 1, color: '#9bfba6' }],
            globalCoord: false
          }
         },
        itemStyle: { color: "#3383c8" },
      }

      return {
        timeOut: '',
        selectValue: '',                //选中的原料
        options: [                      //所有原料（获取）
          {name: '原料1', id: 1},
        ],
        showLine: true,                 //显示曲线图
        date: '2019-01-01',
        tabStyle1: 'tabStyle1',         //表格样式
        tabStyle2: 'tabStyle2',
        tabData1: [                     //表格1数据
          {id:1, product: '5655', order: '12122121', sellingPrice: 465, std: 456, buy: 123, percent: '10%'},
        ],
        tabData2: [                     //表格2数据
          { name: '5655', stdDosage: 456, orderDosage: 123, purchase: 5711, price: 5811, stdAllCost: 5811, purchaseCost: 5811, effect: 5811},
        ],
        tabDeploy1:[                    //表格1配置
          {label: "相关产品", prop: "product", width: "", align: "center", headerAlign: "center"} ,
          {label: "订单号", prop: "order", width: "", align: "center", headerAlign: "center"} ,
          {label: "售价", prop: "sellingPrice", width: "", align: "center", headerAlign: "center"} ,
          {label: "最新标准成本", prop: "std", width: "", align: "center", headerAlign: "center"} ,
          {label: "最新采购成本", prop: "buy", width: "", align: "center", headerAlign: "center"} ,
          {label: "利润波动率", prop: "percent", width: "", align: "center", headerAlign: "center"} ,
        ],
        tabDeploy2:[                    //表格2配置
          {label: "物料名称", prop: "name", width: "", align: "center", headerAlign: "center"} ,
          {label: "标准用量", prop: "stdDosage", width: "", align: "center", headerAlign: "center"} ,
          {label: "订单用量", prop: "orderDosage", width: "", align: "center", headerAlign: "center"} ,
          {label: "最新采购价", prop: "purchase", width: "", align: "center", headerAlign: "center"} ,
          {label: "最新牌价", prop: "price", width: "", align: "center", headerAlign: "center"} ,
          {label: "标准总成本", prop: "stdAllCost", width: "", align: "center", headerAlign: "center"} ,
          {label: "最新采购成本", prop: "purchaseCost", width: "", align: "center", headerAlign: "center"} ,
          {label: "利润影响", prop: "effect", width: "", align: "center", headerAlign: "center"} ,
        ],

        //曲线配置
        legend: {show:false},
        title: {
          text: '牌价变动曲线',
          left: 'center',
          textStyle: {
            color: "#fff",
            fontWeight: 500
          }
        },
        grid: {width: '96%'},
        yAxis: {
          type: 'value',
          show: true,
          axisLine:{ show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
          axisTick: { show:false },
          axisLabel: { color: "#fff" },
          splitLine: {lineStyle:{color: "#29649d"}}
        },
        xAxis:{
          type:'category',
          show: true,
          boundaryGap: false,
          axisLine:{ show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
          axisTick: { show:true },
          axisLabel: { color: "#fff" },
          splitLine: {lineStyle:{color: "#29649d"}}
        },
        chartData: {                              //曲线数据
          columns: ['date', 'value'],
          rows: [
            { 'date': '05/22', 'value': 133},
            { 'date': '05/23', 'value': 330},
            { 'date': '05/24', 'value': 923},
            { 'date': '05/25', 'value': 123},
            { 'date': '05/26', 'value': 392},
            { 'date': '05/27', 'value': 493}
          ]
        }
      }
    },

    created () {
      let that = this;
      let now = new Date();
      let nowDay = now.getDate();
      let nowMonth = now.getMonth() + 1;
      let nowYear = now.getYear();
      let hours = now.getHours();
      let min = now.getMinutes();
      nowYear += (nowYear < 2000) ? 1900 : 0;
      if (nowMonth < 10) {
        nowMonth = "0" + nowMonth;
      }
      if (nowDay < 10) {
        nowDay = "0" + nowDay;
      }
      this.date = nowYear + '-' + nowMonth + '-' + nowDay;

      this.loadSelect();
      this.changeSelect();
      this.selectValue = this.options[0].id;         //接口确定后删除
      
      that.timeOut = setInterval(function(){
        that.loadSelect();
        that.changeSelect();
      },60*60*1000);
    },

    methods: {
      //获取option数据（原料）
      loadSelect () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{                                      //接口确定后解开
          // console.log(res.data);
          // that.options = res.data;
          // that.selectValue = that.options[0].id
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //曲线数据
      changeSelect (value) {
        let that = this;
        let id = {id: value}
        axios.post(this.host+'',
          qs.stringify({
            ...id,
        }))
        .then(res=>{
          // console.log(res.data);                    //接口确定后解开
          // that.chartData.rows = res.data;
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //加载表格1
      loadTab1 () {
        let that = this;
        that.showLine = false;
        let id = {id: that.selectValue}
        axios.post(this.host+'',
          qs.stringify({
            ...id,
        }))
        .then(res=>{
          // console.log(res.data);
          // that.tabData1 = res.data;                    //接口确定后解开
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //加载表格2
      loadTab2 (id) {
        let that = this;
        let rowId = {id: id}
        axios.post(this.host+'',
          qs.stringify({
            ...rowId,
        }))
        .then(res=>{
          // console.log(res.data);
          // that.tabData2 = res.data;                    //接口确定后解开
        })
        .catch(error=>{
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  .priceBox{
    height: 100%;
  }
  .lineBox,.tabBox{
    height: 100%;
  }
  .lineBox a,.tabBox a{
    display: inline-block;
    height: 26px;
    width: 90px;
    text-align: center;
    line-height: 26px;
    font-size: 13px;
    color: #000000;
    background-image: linear-gradient(0deg, 
		rgba(0, 0, 0, 0.49) 0%, 
		rgba(255, 255, 255, 0.49) 100%), 
	linear-gradient(
		#f8b551, 
		#f8b551);
	background-blend-mode: color-burn, 
    normal;
    border-radius: 15px;
  }
  .lineBox a:active{
    background-image: linear-gradient(160deg, 
		rgba(0, 0, 0, 0.49) 0%, 
		rgba(255, 255, 255, 0.49) 100%), 
	linear-gradient(
		#f8b551, 
		#f8b551);
	background-blend-mode: color-burn, 
    normal;
  }
  .tabBox a{
    background-image: none;
    background-color: #7ecef4;
  }
  .tabBox span{
    font-size: 14px;
    color: #fff
  }
  .tabOutside{
    height: calc(100% - 40px);
    margin-top: 14px;
  }
</style>


